<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2022/3/30
  Time: 16:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


<html>
<head>
    <title>图书在线借阅系统</title>
    <link rel="stylesheet" type="text/css" href="lib/layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="lib/layui/css/book.css">
    <script type="text/javascript" src="lib/layui/layui.js"></script>
    <script type="text/javascript" src="lib/js/jquery-3.4.1.js"></script>
    <style>
        .layui-layout-body {
            background: url("lib/Images/bg-4.jpg") no-repeat;
            background-size: cover;
        }
        .layui-elem-field {
            font-weight: bolder;
        }

    </style>
</head>
<body class="layui-layout-body">
<div class="layui-container-box" style="width:90%;background: url(lib/Images/bg.jpg )">
    <fieldset class="layui-elem-field layui-field-title" >
        <legend>会员信息表</legend>
    </fieldset>

    <div class="demoTable" >
        <div class="layui-form-item" style="width: 70px; margin-left: 30px; margin-bottom: -38px;">

            <div class="layui-input-inline">
                <select class="layui-select" id="searchType" name="searchType" lay-filter="searchType" class="selectDate" aria-invalid="false" >

                    <option style="width: 70px;" value="memId" selected="selected" >会员卡号</option>
                    <option style="width: 70px;" value="mname" >&nbsp;&nbsp;&nbsp;姓名</option>

                </select>
            </div>

        </div>

        <div class="layui-input-inline">
            <input class="layui-input" name="search" id="search" autocomplete="off" style="width: 100px;margin-left: -120px;" lay-verify="required"/>
        </div>
        <button class="layui-btn" id="searchBtn" data-type="reload" style="margin-left: -20px;">搜索</button>
    </div>
    <table class="layui-hide"  id="mem-list" lay-filter="mem-list" ></table>

    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
</div>
</body>
</html>
<script type="text/javascript">

    layui.use(['dropdown', 'util', 'layer', 'table','form'],function () {
        var dropdown = layui.dropdown
            ,util = layui.util
            ,layer = layui.layer
            ,table = layui.table
            ,$ = layui.jquery;

        var form = layui.form;

        //获取下拉框选中的值
        form.on('select(searchType)',function(data){
                category = data.value;
                console.log(category);
            searchType = data.elem[data.elem.selectedIndex].text;
                console.log(searchType);
                form.render('select');
            }


        );

        //输入框判空
        $("#searchBtn").click(function(){
            var $ = layui.$;
            var key = $("#search").val();
            console.log(key);

            if(key==''){

                alert("请输入内容查询！");
                return;

            }else{
                var $ = layui.$, active = {
                    reload:function () {
                        //搜索框
                        var search=$('#search').val();
                        //select 选择搜索类型
                        var searchType =$("#searchType").val();

                        //执行重载
                        table.reload('testReload',{
                            url:'member.let?type=ConditionSelect',
                            page:{
                                curr:1 //重新从第1页开始
                            },
                            where:{
                                search:search,
                                searchType:searchType
                            }

                        },'data');
                    }

                };

                $('.demoTable .layui-btn').on('click', function(){
                    var type = $(this).data('type');
                    active[type] ? active[type].call(this) : '';
                });

            };
        });

        table.render({
            elem:'#mem-list',
            url:'member.let?type=query',//数据接口
            title:'会员信息表',
            page:true,//开启分页
            method:'post',
            request: {
                page: 1 //页码的参数名称，默认：page
                ,limit: 5//每页数据量的参数名，默认：limit
            } ,
            cols:[[//表头
                {field:'id',title:'会员卡号',sort:true,fixed:"left", width:110},
                {field:'mname',title:'姓名', width:80},
                {field:'sex',title:'性别', width:75},
                {field:'pwd',title:'密码', width:80},
                {field:'mtname',title:'会员类型',templet:'<div>{{d.type.mtname}}</div>',width: 90},
                {field:'balance',title:'金额', width:60},
                {field:'regdate',title:'注册时间',templet : "<div>{{layui.util.toDateString(d.regdate, 'yyyy-MM-dd')}}</div>", align:'center', width:110},
                {field:'tel',title:'电话', width:130},
                {field:'idNumber',title:'身份证号', width:180},
                {field:'right', title: '操作', toolbar:"#barDemo", width:120}
            ]]
            ,limit:5
            , limits: [5, 10],
            data:function(res){
                console.log(res);
                return {
                    "code":res.code,
                    "msg":res.message,
                    "count":res.count,
                    "data":res.data.item
                }
            },
            id: 'testReload'

        });



        table.on('tool(mem-list)',function (obj) {
            var data = obj.data;
            if (obj.event === 'edit'){
                window.location.href = "member.let?type=mem_modifypre&Id=" + data.id;
            } else if (obj.event == 'del'){
                layer.confirm('确定删除该条数据吗？', function(index){
                    window.location.href = "member.let?type=mem_remove&id=" + data.id;
                    layer.close(index);
                });
            }
        })
    });
</script>


